<template>
  <div class="language-container">
    <!--<div class="box-img">-->
    <!--  <img :src="selectItem.src" :alt="selectItem.value" v-if="showIcon"/>-->
    <!--</div>-->
    <div class="box-content">
      <el-dropdown placement="bottom">
        <span class="el-dropdown-link">
          {{ selectItem.value }}<i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu
          slot="dropdown"
          style="white-space: nowrap !important;"
        >
          <el-dropdown-item
            v-for="(item, index) in list"
            :key="index"
            @click.native="switchLanguage(item)"
          >
            {{ item.value }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
export default {
  name: 'language',
  // inject: ['reload'],
  props: {
    // 值
    val: {
      type: String,
      default: ''
    },
    // 是否显示icon
    showIcon: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      list: this.$languageList,
      selectItem: ''
    }
  },
  computed: {},
  created () {
    this.getSelectItem(this.$cache.getLang())
  },
  methods: {
    getSelectItem (val) {
      // console.log('getSelectItem', val)
      let item = this.list[0]
      if (val) {
        const find = this.list.find(item => item.value == val)
        // console.log('find', find)
        if (find) {
          item = find
        }
      }
      this.switchLanguage(item)
    },
    // 切换语言
    switchLanguage (item) {
      // console.log('switchLanguage', item)
      this.selectItem = item
      this.$emit('update:val', item.value)
      this.$emit('select', item)
      if (item.value == this.$cache.getLang()) {
        // console.log('无需切换语言')
        return
      }
      this.$cache.setLang(item.value)
      this.$i18n.locale = item.value
      window.location.reload()
    },
  }
}
</script>
<style scoped lang="scss">
.language-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;

  .box-img {
    margin-right: 8px;
    & > img {
      width: 20px;
      height: 20px;
    }
  }

  .box-content {
    .el-dropdown-link {
      cursor: pointer;
      font-size: 15px;
      font-weight: 500;
      text-align: center;
      color: #39404d;
      display: flex;
      align-items: center;
    }

    .el-icon-arrow-down {
      font-size: 12px;
      color: #c3c1c4;
    }
  }
}
</style>
